<template>
  <div class="app-container">
    <div class="filter-container">

      <#list columns as column>
      <el-input v-model="${column.lowerAttrName}" class="algin" style="width: 200px;margin-right: 10px;" placeholder="请输入${column.comments}" />
      </#list>

      <el-button type="primary" icon="el-icon-search" @click="getList()">
        搜 索
      </el-button>
      <el-button type="primary" icon="el-icon-search" @click="handleCreate()">
        添 加
      </el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>

      <#list columns as column>
        <el-table-column label="${column.comments}" align="center" width="200px" prop="${column.lowerAttrName}" />
      </#list>

      <el-table-column label="操作" align="center" width="300px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button
            type="error"
            size="mini"
            @click="handleDelete(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pagedata.total>0"
      :total="pagedata.total"
      :page.sync="pagedata.page"
      :limit.sync="pagedata.size"
      @pagination="getList"
    />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <#list columns as column>
          <el-form-item label="${column.comments}" prop="${column.lowerAttrName}">
            <el-input v-model="temp.${column.lowerAttrName}" placeholder="请输入${column.comments}" />
          </el-form-item>
        </#list>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {

  ${className}Page,
  ${className}Add,
  ${className}Edit,
  ${className}Del

} from '@/api/public.js'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {
  Loading
} from 'element-ui'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialogStatus: 'create',
      textMap: {
        update: '编辑',
        create: '增加'
      },
      list: [],
      listLoading: false,
      pagedata: {
        page: 1,
        size: 10,
        total: 0
      },
      temp: {
        <#list columns as column>
          <#if column_has_next>
            ${column.lowerAttrName}: null,
          <#else>
            ${column.lowerAttrName}: null
          </#if>
        </#list>
      },
      dialogFormVisible: false,
      rules: {
          <#list columns as column>
            <#if column_has_next>
              ${column.lowerAttrName}: [{
                required: true,
                message: '请输入${column.comments}',
                trigger: 'blur'
              }],
            <#else>
              ${column.lowerAttrName}: [{
                required: true,
                message: '请输入${column.comments}',
                trigger: 'blur'
              }]
            </#if>
          </#list>
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getButton() {
      findButtonByRole({
        menuId: this.menuId
      }).then(res => {
        res.data.forEach(item => {
          this.btnList.push(item.perms)
        })
      })
    },
    getList() {
      this.listLoading = true
      ${className}Page({
        currentPage: this.pagedata.page,
        pageSize: this.pagedata.size
      }).then(res => {
        this.listLoading = false
        this.pagedata.total = Number(res.data.total)
        this.pagedata.size = Number(res.data.size)
        this.list = res.data.records
        // this.list = res.data.records.map(item => {
        //   this.options1.map(ite => {
        //     if (item.level === ite.levelId) {
        //       item.levelName = ite.levelName
        //     }
        //   })
        //   return item
        // })
      })
    },
    resetTemp() {
      this.temp = {
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const moudle = {
            target: '.el-dialog'
          }
          const loadingInstance = Loading.service(moudle)
          ${className}Add(this.temp).then(res => {
            loadingInstance.close()
            this.getList()
            this.dialogFormVisible = false
            this.$message({
              message: res.message,
              type: 'success'
            })
          }).catch(() => {
            loadingInstance.close()
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign(this.temp, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const moudle = {
            target: '.el-dialog'
          }
          const loadingInstance = Loading.service(moudle)
          ${className}Edit(this.temp).then(res => {
            loadingInstance.close()
            this.getList()
            this.dialogFormVisible = false
            this.$message({
              message: res.message,
              type: 'success'
            })
          }).catch(() => {
            loadingInstance.close()
          })
        }
      })
    },
    handleDelete(id) {
      ${className}Del({
        ids: id
      }).then(res => {
        this.getList()
        this.$message({
          message: res.message,
          type: 'success'
        })
      })
    }
  }
}
</script>
